<script setup lang="ts">
import { ref } from 'vue';
import { showLoading, hideLoading, getCurrentInstance } from '@tarojs/taro';
import { useNurses } from '@/service';
import { useImage } from '@/hooks';
definePageConfig({
    navigationBarTitleText: '护工详情'
});

const { queryById, listNurseNursesCertificateByMainId, listNurseNursesCommentByMainId } = useNurses();

const {
    router: {
        params: { id }
    }
}: any = getCurrentInstance();

const data: any = ref({});

getData();

async function getData() {
    showLoading({ title: '正在请求数据...' });

    let result = await queryById(id);

    if (!result.error && result.success) data.value = { ...result.success };

    data.value.avatar = useImage(data.value.avatar);

    result = await listNurseNursesCertificateByMainId(id);

    if (!result.error && result?.success?.records) {
        data.value.certificate = [...result.success.records];

        const newArr = result?.success?.records.map((item: any) => {
            return {
                src: useImage(item.pic),
                imgUrl: useImage(item.pic)
            };
        });

        data.value.certificate.images = [...newArr];
    }
    result = await listNurseNursesCommentByMainId(id);

    if (!result.error && result?.success?.records) data.value.comment = { ...result.success.records };

    hideLoading();
}

const showPreview = ref(false);

const initNo = ref(0);

const hideFn = () => {
    showPreview.value = false;
};
const clickImages = (imgs: any) => {
    initNo.value = imgs.index;
    showPreview.value = true;
};
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="护工详情" showLeft /> -->
        <view class="w-375px text-primary flex-col-center mb-15">
            <view class="w-375px flex-center h-120px bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70">
                <view class="w-full h-full flex justify-start items-center">
                    <view class="w-1/2 flex-center">
                        <nut-avatar size="large"><img :src="data?.avatar" /></nut-avatar>
                        <view class="flex-col-center items-start">
                            <view class="font-bold ml-1 text-lg">{{ data.name }}</view>
                            <nut-rate v-model="data.rate" readonly count="5" size="mini" spacing="1" />
                        </view>
                    </view>
                    <view class="w-1/2 flex-center">
                        <view class="w1/3 whitespace-nowrap flex-col-center">
                            <view class="text-sm">服务年限</view>
                            <view class="text-amber font-bold text-sm h-20px">{{ data.life }}年</view>
                        </view>
                        <view class="w1/3 whitespace-nowrap flex-col-center">
                            <view class="text-sm">服务人数</view>
                            <view class="text-amber font-bold text-sm h-20px">{{ data.serverNumber }}人</view>
                        </view>
                        <view class="w1/3 whitespace-nowrap flex-col-center">
                            <view class="text-sm">正在服务</view>
                            <view class="text-amber font-bold text-sm h-20px"></view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="w-360px flex-col-center">
                <view v-if="data.profile" class="bg-#fff mt-2 b-rounded-3 shadow w-full">
                    <view class="font-bold ml-2 m-t-2 text-lg">简介</view>
                    <view class="mx-2 m-b-2">{{ data.profile }}</view>
                </view>
                <view v-else class="bg-#fff mt-2 b-rounded-3 shadow w-full h-100px">
                    <view class="font-bold ml-2 m-t-2 text-lg">简介</view>
                    <view class="text-center">暂无简介</view>
                </view>

                <view v-if="data.certificate?.length > 0" class="bg-#fff w-full shadow mt-2 b-rounded-3">
                    <view class="font-bold ml-2 m-t-2 text-lg">证书</view>
                    <nut-comment class="important:w-344px mx-2" images-rows="multi" :images="data?.certificate?.images"
                        @clickImages="clickImages"></nut-comment>
                </view>
                <view v-else class="bg-#fff mt-2 b-rounded-3 shadow h-100px w-full">
                    <view class="font-bold ml-2 m-t-2 text-lg">证书</view>
                    <view class="text-center">暂无证书</view>
                </view>
                <view v-if="data.comment?.length > 0" class="bg-#fff w-full shadow mt-2 b-rounded-3">
                    <view class="font-bold ml-2 m-t-2 text-lg">用户评价</view>
                </view>
                <view v-else class="bg-#fff mt-2 b-rounded-3 shadow h-100px w-full">
                    <view class="font-bold ml-2 m-t-2 text-lg">用户评价</view>
                    <view class="text-center">暂无评价</view>
                </view>
            </view>
            <nut-ImagePreview pagination-color="#059669" closeable close-icon-position="top-left" :show="showPreview"
                pagination-visible :images="data?.certificate?.images" :init-no="initNo" @close="hideFn" />
        </view>
        <view class="w-375px bg-white h-48px pos-fixed pos-bottom-0 pos-left-0 flex-center justify-around">
            <nut-button class="important:w-150px font-bold text-lg" type="info">咨询</nut-button>
            <nut-button class="important:w-150px font-bold text-lg" type="primary">立即预约</nut-button>
        </view>
    </basic-layout>
</template>
<style lang="scss">
.nut-comment-header {
    display: none;
}

.nut-comment-bottom {
    display: none;
}
</style>
